$px: 100vw / 1600;
body {
	margin: 0;
	padding: 0;
	background-color: lighten($color: #282c34, $amount: 2%);
}
nav {
	position: relative;
	z-index: 999;
	width: 100%;
	height: 25 * $px;
	display: flex;
	font-size: 17 * $px;
	background-color: #282c34;
	color: #fff;
	.col {
		position: relative;
		z-index: 999;
		width: 100 * $px;
		height: 100%;
		padding: 0 4 * $px;
		text-align: center;
		overflow: hidden;
		&:hover {
			height: max-content;
			overflow: visible;
		}
		.col-title {
			line-height: 25 * $px;
		}
		.col-items {
			margin-top: 3px;
			background-color: lighten($color: #282c34, $amount: 2%);
		}
		.item {
			text-align: left;
			padding: 3 * $px 0;
			padding-left: 10*$px;
			font-size: 15 * $px;
			cursor: pointer;
			&:hover {
				background-color: lighten($color: #282c34, $amount: 15%);
			}
		}
		.item-nav {
			@extend .item;
			position: relative;
			overflow: visible;
			.hidden-layer {
				position: absolute;
				width: 100 * $px;
				top: 0%;
				left: 100%;
				display: none;
				background-color: lighten($color: #282c34, $amount: 2%);
			}
			&::after {
				position: absolute;
				left: 80 * $px;
				content: '▷';
			}
			&:hover .hidden-layer {
				display: block;
			}
		}
	}
	#open {
		text-shadow: 2 * $px 2 * $px 2 * $px #fff;
		margin: 0 7 * $px;
		.item {
			text-shadow: none;
		}
		.item-nav {
			text-shadow: none;
		}
		img {
			height: 25 * $px;
			vertical-align: top;
		}
	}
	#select-bar {
		display: flex;
	}
}
